<!-- 在网页中引入 Vue.js 库 要放在第一行 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div class="shopping-cart" id="app">
    <h1>商城</h1>
    <div class="content">
        <!-- 商品列表部分 -->
        <div class="product-list">
            <h2>商品列表</h2>
            <!-- 遍历商品数组并渲染每个商品的信息 -->
            <div class="product" v-for="product in products" :key="product.id">
                <h3>{{ product.name }}</h3>
                <p>价格: {{ product.price }} 元</p>
                <!-- 按钮，点击时触发添加商品到购物车的事件 -->
                <button @click="addToCart(product)">添加到购物车</button>
            </div>
        </div>
        <!-- 购物车部分 -->
        <div class="cart">
            <h2>购物车</h2>
            <!-- 如果购物车为空，则显示提示信息 -->
            <div v-if="cartItems.length === 0">购物车为空</div>
            <!-- 遍历购物车中的商品并渲染每个商品的信息 -->
            <div class="cart-item" v-for="item in cartItems" :key="item.id">
                <h3>{{ item.name }}</h3>
                <p>数量: {{ item.quantity }}</p>
                <p>价格: {{ item.price }} 元</p>
                <!-- 按钮，点击时触发移除商品的事件 -->
                <button @click="removeFromCart(item.id)">移除</button>
            </div>
        </div>
    </div>
    <!-- 购物车总金额部分 -->
    <div class="cart-total">
        <h2>总计</h2>
        <!-- 如果总金额大于 0，则显示总金额 -->
        <p v-if="total > 0">总金额: {{ total }} 元</p>
        <!-- 如果购物车为空，则提示用户 -->
        <p v-else>购物车为空，无法计算总金额</p>
    </div>
</div>

<script>
    const { createApp, ref, watch, computed } = Vue //来从 Vue.js 库中解构出一些常用的 API

    // createApp 是 Vue 3 中的一个函数，用于创建一个新的 Vue 应用程序实例。
    //setup 是一个组件选项，定义了组件的逻辑部分，使用了 Vue 3 的 Composition API(组合式API)。
    createApp({
        setup() {
            // 定义响应式的商品数组，包含多个商品对象
            const products = ref([
                { id: 1, name: '商品 A', price: 100 }, // 商品 A
                { id: 2, name: '商品 B', price: 200 }, // 商品 B
                { id: 3, name: '商品 C', price: 300 }, // 商品 C
            ]);

            // 定义响应式的购物车商品数组
            const cartItems = ref([]);

            // 添加商品到购物车的函数
            const addToCart = (product) => {
                // 检查购物车中是否已存在该商品
                const existingItem = cartItems.value.find(item => item.id === product.id);
                if (existingItem) {
                    // 如果存在，增加数量
                    existingItem.quantity++;
                } else {
                    // 如果不存在，添加新商品，数量设为 1
                    cartItems.value.push({ ...product, quantity: 1 });
                }
            };

            // 从购物车中移除商品的函数
            const removeFromCart = (itemId) => {
                // 过滤掉已移除的商品，更新购物车
                cartItems.value = cartItems.value.filter(item => item.id !== itemId);
            };

            // 计算总金额的响应式属性
            const total = computed(() => {
                // 初始化总金额为 0
                let totalAmount = 0;
                // 遍历每个商品
                cartItems.value.forEach(item => {
                    // 计算当前商品的总价
                    const itemTotal = item.price * item.quantity;
                    // 将当前商品的总价累加到总金额中
                    totalAmount += itemTotal;
                });
                // 返回最终的总金额
                return totalAmount;
            });

            //以下返回一个对象，其中包含了组件中定义的所有响应式状态、方法和计算属性。
            //这些返回的属性和方法可以在模板中直接使用。
            return {
                //以下是变量
                products,
                cartItems,
                total,
                //以下是函数跟计算属性
                addToCart,
                removeFromCart,
            }
        }
    }).mount('#app') //// 将 Vue 应用挂载到 id 为 app 的元素上
</script>

<style>
    /* 购物车的主要容器样式 */
    .shopping-cart {
        max-width: 1200px;
        /* 最大宽度 */
        margin: auto;
        /* 居中对齐 */
        padding: 20px;
        /* 内边距 */
    }

    /* 标题样式 */
    h1 {
        text-align: center;
        /* 标题居中 */
    }

    /* 内容区域样式 */
    .content {
        display: flex;
        /* 使用 flexbox 布局 */
        justify-content: space-between;
        /* 组件之间的间距 */
        gap: 20px;
        /* 添加组件之间的间距 */
    }

    /* 商品列表和购物车的样式 */
    .product-list,
    .cart {
        flex: 1;
        /* 允许组件扩展 */
        min-width: 300px;
        /* 设置最小宽度 */
    }

    /* 商品项和购物车项的样式 */
    .product,
    .cart-item {
        border: 1px solid #ccc;
        /* 添加边框 */
        padding: 10px;
        /* 内边距 */
        margin-bottom: 10px;
        /* 每个商品项之间的间距 */
    }

    /* 总金额显示样式 */
    .cart-total {
        font-weight: bold;
        /* 加粗字体 */
        text-align: center;
        /* 文本居中 */
        margin-top: 20px;
        /* 顶部间距 */
    }
</style>